<template>
  <div class="setEditor">
    <a-button type="primary" @click="showList = true">
      编辑内容
    </a-button>
    <a-modal :visible="showList" title="编辑内容" @cancel="showList = false" :width="800" @ok="showList = false" okText="确定" cancelText="取消">
      <div id="editor">
        <vue-ueditor-wrap v-model="content" :config="ueConfig"></vue-ueditor-wrap>
      </div>
    </a-modal>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
const ueConfig = {
  autoHeightEnabled: false,
  initialFrameWidth: '100%',
  initialFrameHeight: 500,
  serverUrl: '/api/upload/ueditor',
  UEDITOR_HOME_URL: '/UEditor/',
  toolbars: [
    [
      'source', //源代码
      '|',
      'undo', //撤销
      'redo', //重做
      '|',
      'bold', //加粗
      'indent', //首行缩进
      'italic', //斜体
      'underline', //下划线
      'strikethrough', //删除线
      '|',
      'subscript', //下标
      'superscript', //上标
      '|',
      'directionalityltr', //从左向右输入
      'directionalityrtl', //从右向左输入
      '|',
      'insertorderedlist', //有序列表
      'insertunorderedlist', //无序列表
      'inserttable', //插入表格
      'edittable', //表格属性
      'mergecells', //合并多个单元格
      'splittocells', //完全拆分单元格
      '|',
      'forecolor', //字体颜色
      'backcolor', //背景色
      '|',
      'removeformat', //清除格式
      'fontfamily', //字体
      'fontsize', //字号
      'forecolor', //字体颜色
      '|',
      'justifyleft', //居左对齐
      'justifyright', //居右对齐
      'justifycenter', //居中对齐
      'justifyjustify', //两端对齐
      '|',
      'horizontal', //分隔线
      'print', //打印
      'drafts', // 从草稿箱加载
      'insertimage', //多图上传
      'insertvideo', //视频
      'map', //Baidu地图
      'fullscreen', //全屏
    ]
  ]
}

export default {
  name:"setEditor",
  components:{
    VueUeditorWrap
  },
  props:{
    list:{
      type:String,
    }
  },
  data() {
    return {
      showList:false,
      ueConfig,
      content:""
    }
  },
  created() {
    this.content = this.list
  },
  watch:{
    content(e){
      this.$emit("update:list",e)
    }
  }
}
</script>

<style scoped>
  
</style>